import {genChartByAiAsyncUsingPost} from '@/services/luckbi/chartController';
import {UploadOutlined, VerticalAlignBottomOutlined} from '@ant-design/icons';
import {ProForm} from '@ant-design/pro-form';
import {Button, Card, Col, Divider, Form, Input, message, Row, Select, Space, Spin, Upload, Image} from 'antd';
import TextArea from 'antd/es/input/TextArea';
import React, {useState} from 'react';
import useForm = ProForm.useForm;

/**
 * 添加图表ai请求 (异步)
 * @constructor
 */
const AddChartAsync: React.FC = () => {
  const [submitting, setSubmitting] = useState<boolean>(false);
  const [from, setFrom] = useForm();

  const onFinish = async (values: any) => {
    if (submitting) {
      return;
    }
    setSubmitting(true);
    // 调用后端接口
    const params = {
      ...values,
      file: undefined,
    };
    try {
      const res = await genChartByAiAsyncUsingPost(params, {}, values.file.file.originFileObj);
      // console.log('返回結果: ', res);
      if (res?.data) {
        message.success('分析任务成功，请稍后在历史图表中查看分析结果。');
        from.resetFields();
      } else {
        message.error('分析失败: ' + res.message);
      }
    } catch (e: any) {
      console.log('错误信息: ', e);
      message.error('分析失败：' + e.message);
    }
    setSubmitting(false);
  };

  return (
    <div className="add-chart">
      <Row gutter={24}>
        <Col span={11}>
          <Card title="智能分析">
            <Form
              form={from}
              name="addChart"
              onFinish={onFinish}
              initialValues={{}}
              labelAlign="left"
              labelCol={{span: 6}}
            >
              <Form.Item
                name="goal"
                label="分析目标"
                rules={[{required: true, message: '请输入分析目标'}]}
              >
                <TextArea placeholder="请输入你的分析需求，比如：分析人口的最近增长情况"></TextArea>
              </Form.Item>
              <Form.Item
                name="name"
                label="图表名称"
                rules={[{required: true, message: '请输入图表名称'}]}
              >
                <Input placeholder="请输入图表名称"></Input>
              </Form.Item>

              <Form.Item
                name="chartType"
                label="图表类型"
                hasFeedback
                rules={[{required: true, message: '请选择图表类型'}]}
              >
                <Select
                  options={[
                    {value: '折线图', label: '折线图'},
                    {value: '柱状图', label: '柱状图'},
                    {value: '饼图', label: '饼图'},
                    {disabled: true, value: '热力图', label: '热力图'},
                    {disabled: true, value: '旭日图', label: '旭日图'},
                    {disabled: true, value: '雷达图', label: '雷达图'},
                    {disabled: true, value: '散点图', label: '散点图'},
                    {disabled: true, value: '地理坐标/地图', label: '地理坐标/地图'},
                    {disabled: true, value: 'K线图', label: 'K线图'},
                    {disabled: true, value: '盒须图', label: '盒须图'},
                    {disabled: true, value: '关系图', label: '关系图'},
                    {disabled: true, value: '路径图', label: '路径图'},
                    {disabled: true, value: '树图', label: '树图'},
                    {disabled: true, value: '矩形树图', label: '矩形树图'},
                    {disabled: true, value: '平行坐标系', label: '平行坐标系'},
                    {disabled: true, value: '桑基图', label: '桑基图'},
                    {disabled: true, value: '漏斗图', label: '漏斗图'},
                    {disabled: true, value: '仪表盘', label: '仪表盘'},
                    {disabled: true, value: '象形柱图', label: '象形柱图'},
                    {disabled: true, value: '主题河流图', label: '主题河流图'},
                  ]}
                ></Select>
              </Form.Item>

              <Form.Item
                name="file"
                label="上传数据"
                rules={[{required: true, message: '请选择需要分析文件'}]}
              >
                <Upload name="file" maxCount={1}>
                  <Button icon={<UploadOutlined/>}>上传分析文件</Button>
                </Upload>
              </Form.Item>

              <Form.Item label="示例文件">
                <Button
                  type="link"
                  icon={<VerticalAlignBottomOutlined/>}
                  href="/example.xlsx"
                  download
                >
                  下载示例文件
                </Button>
              </Form.Item>

              <Form.Item wrapperCol={{span: 16, offset: 6}}>
                <Space>
                  <Button type="primary" htmlType="submit" loading={submitting} disabled={submitting}>
                    开始分析
                  </Button>
                  <Button htmlType="reset">重置</Button>
                </Space>
              </Form.Item>
            </Form>
          </Card>
        </Col>
        <Col span={11}>
          <Card title="数据分析-认准 Luck AI">
            <div>
              {/*{chart?.genResult ?? (*/}
              {/*  <Empty description="请先在左侧输入数据，开始分析" image={Empty.PRESENTED_IMAGE_SIMPLE}/>*/}
              {/*)}*/}
              <Image
                src="/AI.png"
              />
              <Spin spinning={submitting}/>
            </div>
          </Card>
          <Divider></Divider>
        </Col>
      </Row>
    </div>
  );
};
export default AddChartAsync;
